<div>
    <ion-header>
        <ion-toolbar color="care" mode="ios">
            <ion-title>{{title | translate}}</ion-title>
            <ion-buttons slot="end">
                <ion-button (click)="onModelClose()">{{'Cancel' | translate}}</ion-button>
            </ion-buttons>
        </ion-toolbar>
    </ion-header>

    <div>
        <ion-calendar [(ngModel)]="dateValue"
                      (change)="onChange($event)"
                      [type]="calendar.type"
                      [format]="calendar.format"
                      [options]="calendar.options">
        </ion-calendar>

        <ion-list *ngIf="timeRange && dateValue">
            <ion-item>
                <ion-label>{{'StartTime' | translate}}</ion-label>
                <ion-datetime displayFormat="HH:mm" pickerFormat="HH:mm"
                              [cancelText]="datetimeData[sysLang].cancelText" [doneText]="datetimeData[sysLang].doneText"
                              [hourValues]="[7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]" [minuteValues]="[0, 30]"
                              [(ngModel)]="startTime"
                              (ionChange)="onDatetimeChanged()"></ion-datetime>
            </ion-item>

            <ion-item>
                <ion-label>{{'EndTime' | translate}}</ion-label>
                <ion-datetime displayFormat="HH:mm" pickerFormat="HH:mm"
                              [cancelText]="datetimeData[sysLang].cancelText" [doneText]="datetimeData[sysLang].doneText"
                              [hourValues]="hoursRange" [minuteValues]="minuteRange"
                              [(ngModel)]="endTime"
                              (ionChange)="onDatetimeChanged()"></ion-datetime>
            </ion-item>
        </ion-list>

        <!--<ion-list lines="none" *ngIf="timeRange && dateValue">
            <ion-item>
                <ion-label>{{'SelectTime' | translate}}</ion-label>
                <ion-note slot="end">{{showTime(rangeValue.lower)}} - {{showTime(rangeValue.upper)}}</ion-note>
            </ion-item>

            <ion-item>
                <ion-range [dualKnobs]="true" snaps color="primary" min="5" max="24" step="0.5" [(ngModel)]="rangeValue" (ionChange)="onRangeChanged()">
                    <ion-icon slot="start" name="time" color="secondary"></ion-icon>
                    <ion-icon slot="end" name="time" color="tertiary"></ion-icon>
                </ion-range>
            </ion-item>
        </ion-list>-->

        <div *ngIf="patientQuery">
            <ion-button color="care" expand="block" margin (click)="onModelQuery()">{{'Confirm' | translate}}</ion-button>
        </div>
        <div *ngIf="!patientQuery">
            <ion-button color="care" expand="block" margin (click)="onModelConfirm()">{{'CreateOne' | translate}}</ion-button>
            <ion-button color="care" expand="block" margin (click)="onBatchConfirm()">{{'OneKeyCreate' | translate}}</ion-button>
        </div>
    </div>
</div>
